<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>

	<head lang="en">
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<title>登录</title>
		<link rel="stylesheet" href="${ctxStatic}/jiu/css/public.css" />
		<style>
			.login_bg {
				width: 100%;
				min-height: 100%;
				text-align: center;
				background: #e0ebf4;
				opacity: 0.9;
				position: absolute;
				top: 0;
				left: 0;
			}
			
			#logo {
				margin: 9% auto;
				width: 50%;
			}
			
			img {
				width: 100%;
			}
			
			form {
				width: 80%;
				margin: 0 auto;
				text-align: left;
			}
			
			.login_btn {
				margin-top: 20%;
				width: 100%;
				display: block;
				padding: 10px 0;
				background: #3399ff;
				border: 0;
				font-size: 18px;
				font-family: "Microsoft YaHei";
				color: white;
				text-align: center;
			}
			
			.re_btn {
				width: 60%;
				display: block;
				margin-top: 30px;
				padding-bottom: 10px;
				padding-top: 10px;
				border-radius: 20px;
				margin-left: 20%;
				border: 1px solid white;
				font-size: 18px;
				font-family: "Microsoft YaHei";
				color: black;
				text-align: center;
			}
			
			.box {
				display: flex;
				display: -webkit-flex;
				justify-content: flex-start;
				align-items: center;
			}
			
			.box1 {
				display: flex;
				display: -webkit-flex;
				justify-content: space-between;
				align-items: center;
			}
			
			.bei {
				background-color: #ffffff;
				margin-bottom: 15px;
				height: 45px;
			}
			
			form {
				margin: 5px auto;
			}
			
			label {
				font-size: 16px;
				color: #555;
				line-height: 40px;
				margin-right: 10px;
			}
			
			input {
				height: 38px;
				border-style: none;
				padding: 0 4px;
				background-color: rgba(239, 239, 239, 0);
				width: 40%;
				outline: none;
				color: #BCBCBC;
			}
			
			.msgs {
				display: inline-block;
				padding-left: 0px;
				padding-right: 0px;
				color: #fff;
				font-size: 12px;
				border: 1px solid #3399ff;
				text-align: center;
				height: 45px;
				line-height: 45px;
				background: #3399ff;
				cursor: pointer;
				width: 32%;
			}
			
			form .msgs1 {
				background: #E6E6E6;
				color: #818080;
				border: 1px solid #CCCCCC;
			}
			
			.wenzi {
				margin-left: 10px;
				width: 35%;
			}
		</style>
		<script type="text/javascript" src="${ctxStatic}/jiu/js/jquery.js"></script>
		<script type="text/javascript">
			
		
			$(function(){
				
				$(".msgs").click(function(){
						sendMobileSMS();
					});
				
			});
		
		
			function sendMobileSMS(){
				var mobile = $("#mobile").val();
				if(mobile == null || mobile == ''){
						alert("手机号不能为空!");
						return false;
				}else{
					var reg = /^0?1[3|4|5|7|8][0-9]\d{8}$/;
					if(!reg.test(mobile)){
						/* alert("请正确填写手机号!");
						return false; */
					}
				}
			  		$.ajax({	
					  type: 'POST',
					  url: "${ctxFront}/jiu/sendMobileSMS",
					  dataType: "json",
					  cache:true,
					  async:false,
					  data: {mobile: mobile,uid:"${uid}"},
				　　　       success: function (data) {
						if(data.msg == 'success'){
							alert(data.message);
							
							$(".msgs").unbind("click");
							countDown();
						}else{
							if(data.msg=='error'){
								alert(data.message);
							}else{
								countDown();
							}
						}
				      }	
				});
			}
			
			var validCode = true;
			function countDown(){
				var time = 60;
				var code = $('.msgs');
				if(validCode) {
					validCode = false;
					code.addClass("msgs1");
					var t = setInterval(function() {
						time--;
						code.html(time + "秒");
						if(time == 0) {
							$(".msgs").click(function(){
								sendMobileSMS();
							});
							
							clearInterval(t);
							code.html("重新获取");
							validCode = true;
							code.removeClass("msgs1");
						}
					}, 1000)
				}
			}
			
			
			function submitLogin(){
				var mobile = $("#mobile").val();
				if(mobile == null || mobile == ''){
						alert("手机号不能为空!");
						return false;
				}else{
					var reg = /^0?1[3|4|5|7|8][0-9]\d{8}$/;
					if(!reg.test(mobile)){
						 alert("请正确填写手机号!");
						return false;
					}else{
						var code=$('#code').val();
						if(!(code!=null && code!='')){
							alert('请填写验证码');
							return false;
						}
					}
				}
				
				$.getJSON("${ctxFront }/jiu/submitLogin",{uid:"${uid}",mobile:mobile,code:code}, function(data){
                     alert(data.message);
                     if(data.msg=='success'){
                    	 window.location.href="${ctxFront }/jiu/index?uid=${uid}";
                     }
                });
				
			}
			
			
		</script>

	</head>

	<body style="">

		<div class="login_bg">
			<div id="logo" style="margin-top: 11%;">
				<img src="${ctxStatic}/jiu/img/1.png" alt="">
			</div>
			<div style="max-width: 640px;" id="tijiao">
				<form style="margin-top: 10%;">
					<div class="box bei">
						<span class="wenzi">手机号:</span>
						<input type="number" id="mobile" style="margin-right: 10px;text-align: left;margin-left: -40px;line-height: 40px;" placeholder="请输入手机号">
					</div>

					<div class="box bei">
						<span class="wenzi">验证码:</span>
						<input type="text" id="code" style="margin-right: 10px;margin-left: -40px;">
						<span class="msgs" >获取验证码</span>
					</div>
					<button class="login_btn" type="button" onclick="submitLogin()">登&nbsp;&nbsp;录</button>
				</form>
				<a class="re_btn" href="javascript:register()" style="color:black ;margin-top: 15%;">注册</a>
			</div>
		</div>
	</body>
		<script>
		//注册
		function register(){
			window.location.href="${ctxFront }/jiu/register?uid=${uid}&v="+Math.random();
		}
		</script>
</html>